---
title: アイコンピッカー
image: /images/user-guide/github/github-header.png
---

<Frame>
  <img src="/images/user-guide/github/github-header.png" alt="Header" />
</Frame>

ドロップダウンベースのアイコンピッカーで、ユーザーがリストからアイコンを選択できます。

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import React, { useState } from "react";
import { IconPicker } from "@/ui/input/components/IconPicker";

export const MyComponent = () => {

   const [selectedIcon, setSelectedIcon] = useState("");
   const handleIconChange = ({ iconKey, Icon }) => {
     console.log("Selected Icon:", iconKey);
     setSelectedIcon(iconKey);
   };

  return (
    <RecoilRoot>
      <IconPicker
        disabled={false}
        onChange={handleIconChange}
        selectedIconKey={selectedIcon}
        variant="primary"
      />
    </RecoilRoot>
  );
};
```

</Tab>
<Tab title="Props">

| プロパティ           | タイプ    | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| --------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled        | ブール型   | `true` に設定されるとアイコンピッカーは無効になります                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| onChange        | 機能     | ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります |
| selectedIconKey | string | 最初に選択されたアイコンのキー                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| onClickOutside  | 機能     | ユーザーがドロップダウン外をクリックしたときにトリガーされるコールバック関数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| onClose         | 機能     | ドロップダウンが閉じられたときにトリガーされるコールバック関数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| onOpen          | 機能     | ドロップダウンが開かれたときにトリガーされるコールバック関数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| バリアント           | string | クリック可能なアイコンのビジュアルスタイルバリアント。 オプションには `primary`、 `secondary`、 `tertiary` が含まれます                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

</Tab>
</Tabs>
